<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		 <link href="../assets/css/bootstrap.css" rel="stylesheet" />
		  <!-- FONTAWESOME STYLES-->
		 <link href="../assets/css/font-awesome.css" rel="stylesheet" />
		     <!-- CUSTOM STYLES-->
		 <link href="../assets/css/custom.css" rel="stylesheet" />
		  <!-- GOOGLE FONTS-->
		<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
		<link rel="stylesheet" href="../assets/command/Bootstrap/bootstrap-3.3.0/css/bootstrap.min.css" />
		<link rel="stylesheet" href="../assets/command/bower_components/bootstrap-treeview/dist/bootstrap-treeview.min.css" />
		<script src="../assets/command/jquery-3.4.0.min.js"></script>
		<script src="../assets/command/Bootstrap/bootstrap-3.3.0/js/bootstrap.min.js"></script>
		<script src="../assets/command/bower_components/bootstrap-treeview/dist/bootstrap-treeview.min.js"></script>
		<script src="../assets/command/bower_components/moment/min/moment.min.js"></script>
		<script src="../assets/command/bower_components/moment/min/locales.min.js"></script>
		<script src="../assets/command/bower_components/bootbox/bootbox.min.js"></script>
		<script src="../assets/command/bower_components/bootstrap-select/dist/js/bootstrap-select.js" type="text/javascript" charset="utf-8"></script>
		<script src="../assets/command/bower_components/bootstrap-switch/dist/js/bootstrap-switch.min.js" type="text/javascript"
		 charset="utf-8"></script>
		<script src="../assets/command/bower_components/bootstrap-table/dist/bootstrap-table.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../assets/command/bower_components/bootstrap-table/dist/locale/bootstrap-table-zh-CN.js" type="text/javascript"
		 charset="utf-8"></script>
		<script src="../assets/command/bower_components/moment/min/locales.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				$.ajax({
					type: "get",
					dataType: "json",
					url: "../json/username.json",
					success: function(reslt) {
						creteTable(reslt)
					},
					error: function(date) {
						alert(date);
					}
				});
				$("#btnNew").click(function() {
					$("#divData").modal();
				})
				$("#btnDel").click(function() {
					$("#deletedelData").modal();
				})
					$("#btnUpdate").click(function() {
					$("#updatediv").modal();
				})
					$("#btnSelect").click(function() {
					$("#selectdiv").modal();
				})
			});
		
			function creteTable(userData) {
				$("#tblUser").bootstrapTable("destroy");
				$("#tblUser").bootstrapTable({
					data: userData,
					loadMsg: "正在加载数据",
					sidePagination: "client",
					pageSize: "5",
					pagination: true,
					singleSelect: true,
					columns: [{
							field: "uid",
		
							checkbox: true,
							align: "center"
						},
						{
							field: "username",
							title: "姓名",
							align: "center"
						},
						{
							field: "sex",
							title: "性别",
							align: "center"
						},
						{
							field: "tel",
							title: "电话",
							align: "center"
						},
						{
							field: "idcard",
							title: "身份证号",
							align: "center"
						},
						{
							field: "creattime",
							title: "创建时间",
							align: "center"
						},
						{
							field: "zhuji",
							title: "祖籍",
							align: "center"
						},
						{
							field: "shengri",
							title: "生日",
							align: "center"
						},
						{
							field: "zhangtai",
							title: "状态",
							align: "center"
						},
		
					]
				})
			}
		</script>
		
	</head>
	<body>
		 <h2>人员基本信息</h2>   
		<h5>欢迎回到人员基本信息页面 </h5>
		                   
		       
		             <!-- /. ROW  -->
		             <hr />
		           <div class="row">
		            <div class="col-md-12">
		                <!-- Form Elements -->
		                <div class="panel panel-default">
		                    <div class="panel-heading">
		                       人员基本信息
								
		                    </div>
		                    <div class="panel-body">
		                        <div class="row">
		                            <div class="col-md-12">
		                                <form role="form">
		                                    <div class="form-group">
		                         
		                           <div class="container-fluid">
		                           	<div class=" row col-md-10">
		                     
		                           	</div>
		                           	<div class=" row col-md-10" style="margin-top: 15px; margin-left: px;">
										<button type="button" id="btnSelect" class="btn btn-info">查询</button>
		                           		<button id="btnNew" class=" btn btn-default" type="button">新增</button>
		                           		<button id="btnUpdate" class=" btn btn-success" type="button">修改</button>
		                           		<button id="btnDel" class=" btn btn-danger" type="button">删除</button>
		                           	</div>
		                           	<div class="row col-md-10">
		                           		<table id="tblUser"></table>
		                           	</div>
		                           </div>
		                                    
		  <div class="modal fade" id="divData" tabindex="-1" role="dialog" aria-labelledby="myModelLable" aria-hidden="hidden">
		  	<div class="modal-dialog">
		  		<div class="modal-content">
		  			<div class="modal-header">
		  				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">关闭</button>
		  				<h4 class="modal-title" id="">详细信息</h4>
		  			</div>
		  			<div class="modal-body form-inline">
		  				<div class="form-group">
		  					<label class="control-lable" for="">用户名称：</label>
		  					<input type="text" id="txtDatausername" name="Datausername" maxlength="20" class="form-control" />
		  					<label class="control-lable" for="">联系电话：</label>
		  					<input type="text" id="txttel" name="Datatel" maxlength="20" class="form-control" />
		  					<label class="control-lable" for="">身份证号：</label>
		  					<input type="text" id="idcard" name="id" maxlength="20" class="form-control" />
		  					&nbsp; &nbsp; &nbsp;&nbsp; &nbsp;&nbsp;<label class="control-lable" for="">祖籍:</label>
		  					<input type="text" id="idcard" name="id" maxlength="20" class="form-control" /><br />
		  					<label class="control-lable" for="">出生日期：</label>
		  					<input type="text" id="idcard" name="id" maxlength="20" class="form-control" />
		  					&nbsp; &nbsp; &nbsp;&nbsp; <label class="control-lable" for="">性别：</label>
		  					<select class="form-control">
		  						<option value="saab">男</option>
		  						<option value="opel">女</option>
		  
		  					</select>
		  				</div>
		  				<div class="modal-footer">
		  					<button type="button" id="btnsave" class="btn btn-info">新增</button>
		  				</div>
		  			</div>
		  		</div>
		  	</div>
		  </div>
		
		<div class="modal fade" id="deletedelData" tabindex="-1" role="dialog" aria-labelledby="myModelLable" aria-hidden="hidden">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">关闭</button>
						<h4 class="modal-title" id="">删除用户</h4>
					</div>
					<div class="modal-body form-inline">
						<table class="table">
							<thead>
								<tr>
									<th scope="col">#</th>
									<th scope="col">姓名</th>
									<th scope="col">性别</th>
									<th scope="col">状态</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<th scope="row">1</th>
									
									<td>张三</td>
									<td>男</td>
									<td>在职</td>
								</tr>
								<tr>
									<th scope="row">2</th>
									<td>李四</td>
									<td>女</td>
									<td>在职</td>
								</tr>
								<tr>
									<th scope="row">3</th>
									<td>王五</td>
									<td>男</td>
									<td>在职</td>
								</tr>
							</tbody>
						</table>
						<div class="modal-footer">
							<button type="button" id="btnsave" class="btn btn-info">删除</button>
						</div>
					</div>
				</div>
			</div>
		</div> 
		
		<div class="modal fade" id="updatediv" tabindex="-1" role="dialog" aria-labelledby="myModelLable" aria-hidden="hidden">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">关闭</button>
						<h4 class="modal-title" id="">详细信息</h4>
					</div>
					<div class="modal-body form-inline">
						<div class="form-group">
							<label class="control-lable" for="">用户名称：</label>
							<input type="text" id="txtDatausername" name="Datausername" maxlength="20" class="form-control" />
							<label class="control-lable" for="">联系电话：</label>
							<input type="text" id="txttel" name="Datatel" maxlength="20" class="form-control" />
							<label class="control-lable" for="">身份证号：</label>
							<input type="text" id="idcard" name="id" maxlength="20" class="form-control" />
							&nbsp; &nbsp; &nbsp;&nbsp; &nbsp;&nbsp;<label class="control-lable" for="">祖籍:</label>
							<input type="text" id="idcard" name="id" maxlength="20" class="form-control" /><br />
							<label class="control-lable" for="">出生日期：</label>
							<input type="text" id="idcard" name="id" maxlength="20" class="form-control" />
							&nbsp; &nbsp; &nbsp;&nbsp; <label class="control-lable" for="">性别：</label>
							<select class="form-control">
								<option value="saab">男</option>
								<option value="opel">女</option>
		
							</select>
						</div>
						<div class="modal-footer">
							<button type="button" id="btnsave" class="btn btn-info">修改</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="modal fade" id="selectdiv" tabindex="-1" role="dialog" aria-labelledby="myModelLable" aria-hidden="hidden">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">关闭</button>
						<h4 class="modal-title" id="">详细信息</h4>
					</div>
					<div class="modal-body form-inline">
						<div class="form-group">
							<label class="control-lable" for="">用户名称：</label>
							<input type="text" id="idcard" name="id" maxlength="20" class="form-control" />
							<button type="button" id="btnsave" class="btn btn-info">查询</button><br /><br />
							<label class="control-lable" for="">所在岗位：</label>
							<input type="text" id="idcard" name="id" maxlength="20" class="form-control" />
							<button type="button" id="btnsave" class="btn btn-info">查询</button>
						</div>
						<div class="modal-footer">
							<button type="button" id="btnsave" class="btn btn-info">查询</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
